<template>
      <div class="help-document-wrap">
        <div class="title">form</div>
        <div class="desc">表单字段挂载模型</div>
        <div class="prewrap" v-highlight>
          <pre>
          <code class="javascript">
    form={
      "aaa": null,
      "bbb": null,
      "ccc": null,
      "ddd": {  //分表
        "fff": null,
        "eee": null
      }
    }
          </code>
      </pre>
        </div>
        <div class="title">selector</div>
        <div class="desc">组件选择器</div>
        <div class="prewrap" v-highlight>
          <pre>
          <code class="javascript">
     /**
      * 此处操作输入框为例
      * aaa 为输入框字段标识
      * 主要用于设置组件options下面的属性
      */
    selector("aaa").get("clearable")  //  获取输入框 清空状态
    selector("aaa").set("clearable",true)   //  设置可清空
    selector("aaa").get("clearable").set("clearable",true)  //  可链式调用
          </code>
      </pre>
        </div>
        <div class="title">triggerSource</div>
        <div class="desc">事件触发组件</div>
        <div class="prewrap" v-highlight>
          <pre>
          <code class="javascript">
    {
      "type": "sbutton",
      "name": "按钮",
      "key": "1640576600000_82165",
      "decree": "",
      "sneakIntoName": "",
      "icon": "icon-anniu",
      "options": {
        "defaultValue": "",
        "isConfirm": false,
        ......
        ......
        ......
      },
      "cid": "cid_1640576600000_82165",
      "model": "sbutton_1640576600000_82165"
    }
          </code>
      </pre>
        </div>
        <div class="title">controller</div>
        <div class="desc">控制器</div>
        <div class="prewrap" v-highlight>
          <pre>
          <code class="javascript">
            /**
            * 全局触发事件挂载中心 
            */

            /**
            * 1、表单校验
            */
            controller.verify().then(res=>{
                  console.log(res)  // {isSuccess: true} 
            })

            /**
            * 2、表单重置
            */
            controller.resetFields()

            /**
            * 3、表单提交
            */
            controller.submit().then(res=>{
                  console.log('后台返回结果',res)
            })

          </code>
      </pre>
        </div>
        <div class="title">axios</div>
        <div class="desc">Ajax请求体</div>
        <div class="prewrap" v-highlight>
          <pre>
          <code class="javascript">
      axios({
        method: 'get',
        url: 'http://www.tianqiapi.com/api?version=v1&appid=23035354&appsecret=8YvlPNrz',
        params:{}
      }).then((res)=>{
          console.log('res',res)
      })
          </code>
      </pre>
        </div>
        <div class="title">query</div>
        <div class="desc">URL请求头参数</div>
        <div class="prewrap" v-highlight>
          <pre>
          <code class="javascript">
    //  http://192.168.30.79:8081/#/low-code-design?aaa=123&bbb=234

    console.log(query)  //打印效果
    {aaa: "123", bbb: "234"}
          </code>
      </pre>
        </div>
        <div class="title">params</div>
        <div class="desc">当前页面外部传参</div>
        <div class="prewrap" v-highlight>
          <pre>
          <code class="HTML">
    // 使用低代码组件时  组件传参方式传入的参数
    &lt;low-parse :params="params"  &gt;&lt;/low-parse&gt;
          </code>
      </pre>
        </div>
        <div class="title">setDialogParams</div>
        <div class="desc">向打开弹框传入参数</div>
        <div class="prewrap" v-highlight>
          <pre>
          <code class="javascript">
    // 自定义事件
    ({setDialogParams})=>{
      setDialogParams("params01",{aaa:123})
      setDialogParams("params02",{bbb:456})
    }
          </code>
      </pre>
        </div>
        <div class="title">dialog</div>
        <div class="desc">当前弹框实体</div>
        <div class="prewrap" v-highlight>
          <pre>
          <code class="javascript">
    // 弹框实体类
    dialog.form  // 弹框内部form数据
    dialog.submit() // 触发弹框内部提交
    dialog.submit().then(res=>{  // 弹框提交之后操作
      console.log(res)
    })
          </code>
      </pre>
        </div>
        <div class="title">messagePool</div>
        <div class="desc">应用上下文</div>
        <div class="prewrap" v-highlight>
          <pre>
          <code class="javascript">
    // 表单全局上下文
    1、自定义事件参数
    ({messagePool})=>{
      console.log(messagePool) 
      messagePool.set('aaa',123)  //设置上下文
      messagePool.get('aaa')  //获取上下文
      messagePool.destroy('aaa')  //删除上下文
      messagePool.clear()  //清空上下文
      messagePool.getSize()  //所有上下文个数
    }
    2、可以在引用的项目中使用 
    import {messagePool} from "telehot-lowcode-resolver"
    与自定义事件中的messagePool共享上下文
          </code>
      </pre>
        </div>
        <div class="title">Message</div>
        <div class="desc">自定义提示消息</div>
        <div class="prewrap" v-highlight>
          <pre>
          <code class="javascript">
    // 提示弹框
        Message({
          showClose: true,
          message: '错了哦，自定义事件存在语法错误',
          type: 'error'
        })
        Message({
          showClose: true,
          message: '恭喜你，保存成功',
          type: 'success'
        })
          </code>
      </pre>
        </div>
      </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>
.help-document-wrap {
  .title {
    line-height: 38px;
    padding: 0px 10px;
    font-size: 18px;
    position: relative;
    background: #f5f5f5;
  }
  .title::before {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 3px;
    height: 38px;
    background: #409eff;
  }
  .desc {
    padding: 10px;
  }
}

.prewrap{
  font-size: 18px;
}
</style>